<script setup>
import { ref } from 'vue'
import { artGetChannelsService } from '../../api/article'
import Post from './components/Post.vue'
import PostDetail from './components/PostDetail.vue'
const channelList = ref([])
const loading = ref(false)
const selectedPostId = ref() //控制PostDetail的显示
const getChannelList = async () => {
  loading.value = true
  const res = await artGetChannelsService()
  channelList.value = res.data.data
  loading.value = false
}
getChannelList()
const openPost = (postId) => {
  selectedPostId.value = postId
  console.log('点击有效')
}
const closePost = () => {
  selectedPostId.value = ''
}

const posts = ref([
  // 示例数据，可以根据实际需求填充
  {
    id: 1,
    title: '这是一个帖子标题1',
    authorName: '作者名字1',
    likes: 1150
  },
  {
    id: 2,
    title: '这是一个帖子标题2',
    authorName: '作者名字2',
    likes: 1200
  }
])
</script>

<template>
  <div class="container">
    <div class="postList">
      <Post
        v-for="post in posts"
        :key="post.id"
        :title="post.title"
        :authorName="post.authorName"
        :likes="post.likes"
        @click="openPost(post.id)"
      />
    </div>
    <transition name="fade">
      <PostDetail
        v-if="selectedPostId"
        :postId="selectedPostId"
        @close="closePost"
      />
    </transition>
    <transition name="fade">
      <div v-if="selectedPostId" class="overlay" @click="closePost"></div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
.postList {
  display: flex;
}
.post-list {
  display: flex;
  flex-wrap: wrap;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900; /* 使遮罩层位于弹窗下层 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
